<template>
  <div class="enterprise-live">
    <Header></Header>
    <div class="banner-wrap">
      <div class="banner main-container">
        <img src="~@/assets/img/img_13_135.png" alt />
        <div class="content">
          <h1>金融直播</h1>
          <p>赋能营销，提升业务人员绩效，打造一体化金融直播服务平台</p>
          <p>在线喊单 真人讲盘 个股讲解 金融培训</p>
          <button @click="$router.push({name:'login'})">了解更多</button>
        </div>
      </div>
    </div>
    <div class="section-list">
   
 <div class="section style2 stylestyl">
        <div class="section-inner">
          <div class="tit-container scrollRevealTop0">
            <div class="tit">改变-让未来更多可能</div>
          </div>
          <div class="section-body scrollRevealTop0">
            <swiper class="swiper" :options="swiperOption2">
              <swiper-slide style="width:75%; ">
                <img src="~@/assets/img/img_13_136.png" alt />
                <div class="swiper_div">
                  <div class="swiper_div_text" style="margin-top: 0">直播</div>
                  <div class="swiper_div_txt">高清、稳定、低延时<br>提供良好直播体验、</div>
                </div>
              </swiper-slide>
              <swiper-slide style="width:75%;">
                <img src="~@/assets/img/img_13_137.png" alt />
                <div class="swiper_div">
                  <div class="swiper_div_text"  style="margin-top: 0">桌面共享</div>
                  <div class="swiper_div_txt">操作简易，无需提前准备，<br>打开即可共享桌面内容</div>
                </div>
              </swiper-slide>
              <swiper-slide style="width:75%;">
                <img src="~@/assets/img/img_13_138.png" alt />
                <div class="swiper_div">
                  <div class="swiper_div_text"  style="margin-top: 0">录播</div>
                  <div class="swiper_div_txt">提前录制，到点播放，<br>补充和完善直播场景</div>
                </div>
              </swiper-slide>
            </swiper>
            
          </div>
        </div>
      </div>
      <!-- <div class="section style4">
        <div class="section-inner">
          <div class="tit-container scrollRevealTop0">
            <div class="tit">满足各种金融直播场景</div>
          </div>
          <div class="section-body scrollRevealTop0">
            <div class="home_div">
              <li style="overflow:hidden;font-size: 0;">
                <img src="~@/assets/img/img_13_136.png" alt />
              </li>
              <li>
                <dl>
                  <dt>多应用场景覆盖</dt>
                  <dd>教育培训，政企直播，金融直播，</dd>
                  <dd>知识付费，新零售</dd>
                </dl>
              </li>
            </div>
             <div class="home_div">
              <li style="overflow:hidden;font-size: 0;">
                <img src="~@/assets/img/img_13_137.png" alt />
              </li>
              <li>
                <dl>
                  <dt>多应用场景覆盖</dt>
                  <dd>教育培训，政企直播，金融直播，</dd>
                  <dd>知识付费，新零售</dd>
                </dl>
              </li>
            </div>
             <div class="home_div">
              <li style="overflow:hidden;font-size: 0;">
                <img src="~@/assets/img/img_13_138.png" alt />
              </li>
              <li>
                <dl>
                  <dt>多应用场景覆盖</dt>
                  <dd>教育培训，政企直播，金融直播，</dd>
                  <dd>知识付费，新零售</dd>
                </dl>
              </li>
            </div>
          </div>
        </div>
      </div> -->
      <div class="section style4">
        <div class="section-inner">
          <div class="tit-container scrollRevealTop0">
            <div class="tit">一对一投资顾问</div>
          </div>
          <div class="section-body scrollRevealTop0" >
            <swiper class="swiper" :options="swiperOption2" style="    padding-bottom: 62px;">
              <swiper-slide class="swiperslide">
                <img src="~@/assets/img/img_13_122.png" alt />
                <div class="swiper_div">
                  <div class="swiper_div_text">方便快捷</div>
                  <div class="swiper_div_txt">
                  PC、小程序发起和接入，<br>随时随地音视频通话</div>
                </div>
              </swiper-slide>
              <swiper-slide class="swiperslide">
                <img src="~@/assets/img/img_13_123.png" alt />
                <div class="swiper_div">
                  <div class="swiper_div_text">形式多样</div>
                  <div class="swiper_div_txt"> 文档展示、屏幕共享、画笔等多种功能，<br > 提升沟通效率</div>
                </div>
              </swiper-slide>
              <swiper-slide class="swiperslide">
                <img src="~@/assets/img/img_13_124.png" alt />
                <div class="swiper_div">
                  <div class="swiper_div_text">安全管控</div>
                  <div class="swiper_div_txt">视频加密，<br> 保障沟通的私密性与安全性</div>
                </div>
              </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
            
          </div>
        </div>
      </div>
      <div class="section style4">
        <div class="section-inner">
          <div class="tit-container scrollRevealTop0">
            <div class="tit">丰富的营销功能助力快速获客</div>
          </div>
          <div class="section-body scrollRevealTop0">
            <div class="home_div_two">
              <li style="overflow:hidden;font-size: 0;">
                <img src="~@/assets/img/img_13_139.png" alt />
              </li>
              <li>
                <dl>
                  <dt>在线咨询</dt>
                  <dd>问答、互动讨论、私聊功能助力在线营销</dd>
                </dl>
              </li>
            </div>
             <div class="home_div_two">
              <li style="overflow:hidden;font-size: 0;">
                <img src="~@/assets/img/img_13_140.png" alt />
              </li>
              <li>
                <dl>
                  <dt>丰富互动</dt>
                  <dd>聊天、弹幕、直播答题、投票、抽奖等丰富营销场景</dd>
                </dl>
              </li>
            </div>
             <div class="home_div_two">
              <li style="overflow:hidden;font-size: 0;">
                <img src="~@/assets/img/img_13_141.png" alt />
              </li>
              <li>
                <dl>
                  <dt>直播数据</dt>
                  <dd>提供用户观看行为轨迹数据，助力精准营销</dd>
                </dl>
              </li>
            </div>
          </div>
        </div>
      </div>

      <div class="section style3">
        <div class="section-inner">
          <div class="tit-container scrollRevealTop0">
            <div class="tit">安全稳定大机构信赖</div>
          </div>
          <div class="section-body scrollRevealTop0">
            <swiper class="swiper" :options="swiperOption1">
              <swiper-slide>
                <div class="content">
                  <div>
                    <img src="~@/assets/img/img_1_8.png" alt />
                  </div>
                  <h1>《故宫知时节》读书分享会线上直播</h1>
                  <p>
                    故宫博物院副院长 任万平
                    <br />央视著名主持人 宋英杰
                    <br />现场解读故宫节气与物候之美
                  </p>
                  <span>
                    联合人民网、央视频、中央人民广播电台、
                    <br />微博、抖音、腾讯视频、优酷等同步直播
                  </span>
                </div>
              </swiper-slide>
              <swiper-slide>
                <div class="content">
                  <div>
                    <img src="~@/assets/img/img_13_47.png" alt />
                  </div>
                  <h1>第四届未来网络发展大会</h1>
                  <p>
                    “云上+线下”模式，双向并举
                    <br />融合大会九大板块，集成十余论坛直播入口，一目了然
                  </p>
                  <span>
                    联合人民网、央视频、中央人民广播电台、
                    <br />微博、抖音、腾讯视频、优酷等同步直播
                  </span>
                </div>
              </swiper-slide>
              <swiper-slide>
                <div class="content">
                  <div>
                    <img src="~@/assets/img/img_13_721.jpg" alt />
                  </div>
                  <h1>城轨好讲师大赛决赛直播</h1>
                  <p>
                    在弱网的城铁里如何给地铁定位
                    <br />成竹在胸，不负所托，经得起检验的线上大赛
                  </p>
                  <span>
                    联合人民网、央视频、中央人民广播电台、
                    <br />微博、抖音、腾讯视频、优酷等同步直播
                  </span>
                </div>
              </swiper-slide>
              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
          </div>
        </div>
      </div>
      <tryOut></tryOut>
    </div>
    <Footer></Footer>
    <fixed-btn></fixed-btn>
  </div>
</template>

<script>
import Header from "@/components/header";
import Footer from "@/components/footer";
import FixedBtn from "@/components/FixedBtn";
import tryOut from "@/components/tryOut";
import common from "@/assets/js/common";
import config from "@/assets/js/config";

//import $ from "jquery";

export default {
  name: "enterprise-live",
  mixins: [common],
  components: {
    Header,
    Footer,
    FixedBtn,
    tryOut
  },
  data() {
    return {
      swiperOption1: {
        slidesPerView: "auto",
        centeredSlides: true,
        loop: true,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false,
          autoplayDisableOnInteraction: false
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      },
      swiperOption2: {
        slidesPerView: "auto",
        centeredSlides: true,
        loop: true,
        autoplay: {
          delay: 10000000000,
          disableOnInteraction: false,
          autoplayDisableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
    };
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.sectioninner{
      margin-bottom: 0 !important;
}
.stylestyl{
  background: #f6f9fa;
}
.stylestyl img{
  width: 100%;
}
::v-deep .stylestyl .swiper_div{
 background: #fff;
 padding-bottom: 10px;
 border-radius: 0px 0px 5px 5px;
     text-align: left;
         padding-left: 5%;
         width: 90%;
         margin: 0 auto;
}
::v-deep .stylestyl  .swiper-slide{
    border-radius: 10px;
    overflow: hidden;
}
::v-deep.stylestyl .swiper-slide-active .swiper_div{
width: 100%;
}
::v-deep.stylestyl .swiper-slide-active{
      font-size: 0;
     
}
::v-deep.stylestyl .swiper-slide-next{
  margin: 5% 0;
       font-size: 0;
}
::v-deep.stylestyl .swiper-slide-next>img{
    width: 90%;
}
::v-deep.stylestyl .swiper-slide-prev{
  margin: 5% 0;
       font-size: 0;
}
::v-deep.stylestyl .swiper-slide-prev>img{
    width: 90%;
}
 ::v-deep .swiper-pagination-bullet-active {
    width: 20px !important;
    height: 9px !important;
    border-radius: 20px;
    background: #FE8401;
}
 ::v-deep .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    background: #FE8401;
    transition: all 400ms;
}
 ::v-deep .swiper-pagination-bullets{
    bottom: 20px;
    left: 0;
    width: 100%;
}

.swiper_div_text{
  
font-size: 22px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #424242;
line-height: 42px;
margin-top: 20px;
}
.swiper_div_txt{
  
font-size: 13px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #898989;
line-height: 25px;
}
.swiperslide{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    background: #fff;
    width: 80%;
    padding: 60px 0;
    margin: 0 10%;
    align-items: center;
}
.swiperslide div{
  width: 100%;
}
.home_div_two{
    width: 80%;
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 20px;
}
.home_div_two img{
  width: 100%;
}
.home_div_two dl{
  padding: 20px 10px;
  text-align: center;
}    
.home_div_two dt{
  color: #2D2D2D;
  font-size:  18px;
  line-height: 1.3;
  margin-bottom: 20px;
    text-align: center;
}
.home_div_two dd{
  font-size: 15px;
  line-height: 1.5;
  color: #7F7F7F;
    text-align: center;
}
.home_div{
  width: 80%;
  margin: 0 auto;
  background: #FFFFFF;
  box-shadow: 0px 6px 11px 0px rgba(101, 101, 101, 0.15);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 20px;
}
.home_div img{
  width: 100%;
}


.section-list .section {
  background: #F6F9FA !important;
}
.home_div dl{
  padding: 20px 10px;
}    
.home_div dt{
  color: #2D2D2D;
  font-size:  18px;
  line-height: 1.3;
  margin-bottom: 20px;
}
.home_div dd{
  font-size: 15px;
  line-height: 1.5;
  color: #7F7F7F;
}
</style>
